<script lang="ts" setup>
import { useConsoleStore } from '@/store'
import { formatDate } from '@/utils/timeUtils'

definePage({
  style: {
    navigationBarTitleText: '控制台',
  },
})

const consoleStore = useConsoleStore()

// 日志类型中文映射
const logTypeMap = {
  launch: '启动',
  show: '显示',
  hostEventReceive: '主机事件接收',
}

// 清空日志
function clearLogs() {
  consoleStore.clearLogs()
}
</script>

<template>
  <view class="container p-4">
    <!-- 标题和清空按钮 -->
    <view class="mb-4 flex items-center justify-between">
      <h1 class="text-2xl text-slate-800 font-bold">
        控制台日志
      </h1>
      <button class="rounded-lg bg-red-500 px-4 py-2 text-white" @click="clearLogs">
        清空日志
      </button>
    </view>

    <!-- 日志列表 -->
    <view class="log-list">
      <view v-if="consoleStore.consoleLogs.length === 0" class="py-8 text-center text-slate-500">
        暂无日志
      </view>
      <view
        v-for="(log, index) in consoleStore.consoleLogs"
        :key="index"
        class="log-item mb-4 border border-slate-100 rounded-lg bg-white p-4 shadow-sm"
      >
        <!-- 日志头部：类型和时间 -->
        <view class="log-header mb-2 flex items-center justify-between">
          <view class="log-type text-slate-800 font-bold">
            {{ logTypeMap[log.type] || log.type }}
          </view>
          <view class="log-time text-sm text-slate-500">
            {{ formatDate(new Date(log.timestamp), 'datetime') }}
          </view>
        </view>

        <!-- 日志内容 -->
        <view class="log-content max-h-40 overflow-auto rounded-md bg-slate-50 p-3 text-sm text-slate-700">
          {{ log.message }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.log-list {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.log-item {
  transition: all 0.2s ease;
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.log-content {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
